<template>
  <div>
    <van-dialog id="CategoryDialog" :show-cancel-button="false" :show-confirm-button="false" v-model:show="isShow">
      <template #default>
        <CategoryContent :is-show="isShow" @close="parentClose" />
      </template>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const { $isPcScreen } = useCommonPlugin()
const router = useRouter()
const isShow = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})
const parentClose = (val: boolean) => {
  isShow.value = val
}
watch(
  () => $isPcScreen(),
  (val) => {
    if (val) {
      isShow.value = false
    }
  },
)
</script>

<style lang="scss">
#CategoryDialog {
  --van-dialog-radius: 8px;
  background-color: #2a3032;
}
</style>
